<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel">
    <rx-layout>
      <div slot="center">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col v-for="(item,i) in mdl.whereList" :key="item.fieldName" :span="12">
                <a-form-item v-if="item.valueSource=='param' && item.typeOperate=='BETWEEN'" :label="item.comment">
                  <a-input :placeholder="$ti18('rxDecorator.input','请输入')+item.comment" v-model="queryParam[item.fieldName+'_start']"/>
                  <a-input :placeholder="$ti18('rxDecorator.input','请输入')+item.comment" v-model="queryParam[item.fieldName+'_end']"/>
                </a-form-item>
                <a-form-item v-if="item.valueSource=='param' && item.typeOperate!='BETWEEN'" :label="item.comment">
                  <a-input :placeholder="$ti18('rxDecorator.input','请输入')+item.comment" v-model="queryParam[item.fieldName]"/>
                </a-form-item>
              </a-col>

              <a-col :span="12">
                  <span class="table-page-search-submitButtons">
                    <a-button type="primary" @click="doCustomQuery" icon="search">
                        {{$ti18('rxList.searchBtn','查询')}}
                    </a-button>
                    <a-button style="margin-left: 4px" @click="clearQuery">
                        {{$ti18('rxList.resetBtn','重置')}}
                    </a-button>
                  </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div>
          <span style="padding: 10px 0;display: inline-block;">
               {{i18n('form.jsonData','返回JSON数据：')}}
          </span>
          <div style="width:100%;height:300px;">
            <a-textarea :placeholder="$ti18('rxDecorator.input','请输入')" v-model="sqlDiy" style="width:100%;height: 100%;"></a-textarea>
          </div>
        </div>
      </div>
    </rx-layout>

  </rx-dialog>
</template>

<script>
    import FormCustomQueryApi from '@/api/form/core/formCustomQuery'
    import {Util,RxDialog,RxLayout} from "@lowcode/jpaas-common-lib";
    export default {
      name: "FormCustomQueryPreview",
      props:["pkId","layerid","destroy"],
      components: {
        RxDialog,
        RxLayout
      },
      data(){
        return {
          queryParam:{},
          sqlDiy:"",
          confirmLoading: false,
          mdl: {}
        }
      },
      created() {
        this.loadData();
      },
      methods: {
          i18n(name,text,key){
              return this.$ti18(name,text,"formCustomQuery",key);
          },
        cancel(){
          Util.closeWindow(this,"cancel");
        },
        handleSubmit(){
          Util.closeWindow(this,"ok");
        },
        loadData(){
          if(!this.pkId){
            return;
          }
          this.confirmLoading = true;
          FormCustomQueryApi.preview(this.pkId).then (res => {
            this.confirmLoading = false;
            if(res.success && res.code==200) {
              var data=res.data;
              this.mdl = Object.assign(data);
            }
          })
        },
        doCustomQuery:function(){
          var alias=this.mdl.key;
          this.queryParam["preview"]=true
          var postData=JSON.stringify(this.queryParam);
          FormCustomQueryApi.doQuery(alias,"params="+postData).then (res => {
            var result=res.data;
            var dataJson = JSON.stringify(result);
            this.sqlDiy=dataJson;
          });
        },
        clearQuery:function () {
          this.queryParam={};
          this.sqlDiy="";
        }
      }
    }
</script>

<style scoped>

</style>